<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="robots" content="noindex">
    <title>Keiyoushi</title>
    <meta name="description" content="A repository of unofficial Tachiyomi extensions.">
    <meta property="og:title" content="Keiyoushi">
    <meta property="og:description" content="A repository of unofficial Tachiyomi extensions.">
    <meta property="og:image" content="https://avatars.githubusercontent.com/u/113362897?v=4">
    <meta property="og:url" content="https://keiyoushi.github.io/extensions/">
    <meta name="theme-color" content="#2e84bf">
    <link
        rel="stylesheet"
        media="(prefers-color-scheme:light)"
        href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css"
        integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO"
        crossorigin="anonymous"
    />
    <link
        rel="stylesheet"
        media="(prefers-color-scheme:dark)"
        href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/dark.css"
        onload="document.documentElement.classList.add('sl-theme-dark');"
        integrity="sha384-2HpI1Tt4Zv7emgrwKyetd6ouDie+RKolEtNHOdD+KCVHLj1V2fjxryG48h50f0Rw"
        crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../index.css">
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/spinner/spinner.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/radio-group/radio-group.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/radio-button/radio-button.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/input/input.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/select/select.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/option/option.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/tag/tag.js"></script>
    <script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/button/button.js"></script>
    <script async type="module" 
        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/components/icon/icon.js"
        data-shoelace="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/dist">
    </script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"
        integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV"
        crossorigin="anonymous"></script>
    <script src="extensions.js"></script>
    <script data-goatcounter="https://keiyoushi.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>
</head>

<body>
    <header class="header">
        <a class="header__title" href="../">Keiyoushi</a>
    </header>
    <div class="description">
        Join the <a class="description__anchor" href="https://discord.gg/3FbCpdKbdY" onclick="window.goatcounter?.count({ path: location.pathname + '#discord' })">Discord server</a> for support. Make sure to star <a class="description__anchor" href="https://github.com/keiyoushi/extensions">the GitHub repo</a>.
    </div>
    <div class="sources" x-data="extensionList">
        <h1 class="sources__title">Extensions</h1>

        <template x-if="loading === LoadingStatus.Loading">
            <sl-spinner class="sources__status" style="font-size:3rem"></sl-spinner>
        </template>
        
        <template x-if="loading === LoadingStatus.Error">
            <div class="sources__status">Could not load extension list.</div>
        </template>
        
        <template x-if="loading === LoadingStatus.Loaded">
            <div>
                <div class="source-search" x-effect="updateFilteredList">
                    <div class="source-search__nsfw-wrapper">
                        <span class="source-search__nsfw-label">Display mode: </span>
                        <sl-radio-group size="small" 
                            name="nsfw" 
                            value="all" 
                            @sl-change="nsfw = $event.target.value">
                            <sl-radio-button value="all">Show all</sl-radio-button>
                            <sl-radio-button value="nsfw">NSFW</sl-radio-button>
                            <sl-radio-button value="safe">SFW</sl-radio-button>
                        </sl-radio-group>
                    </div>
                    
                    <sl-input class="source-search__title" 
                        placeholder="Search by name or ID..."
                        x-model="query">
                    </sl-input>
                    
                    <sl-select class="source-search__language"
                        multiple clearable
                        placeholder="Filter by languages"
                        @sl-change="selectedLanguages = event.target.value">
                        <template x-for="(language, index) in languages" :key="index">
                            <sl-option :value="language" x-text="languageName(language)"></sl-option>
                        </template>
                    </sl-select>
                </div>
                
                <template x-for="extension in filtered" :key="extension.pkg">
                    <div class="source" 
                        :id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')">
                        <a :href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
                            class="source__anchor">
                            #
                        </a>
                        
                        <img class="source__icon"
                            :alt="`Icon for ${extension.name}`"
                            :src="`${$store.repoUrl}/icon/${extension.pkg}.png`"
                            loading="lazy"
                            width="42"
                            height="42">

                        <div class="source__info">
                            <div class="source__name">
                                <span x-text="extension.name.split(': ')[1]"></span> 
                                
                                <span class="source__version"
                                    x-text="`v${extension.version}`"></span>

                                <sl-tag class="content-rating content-rating--nsfw"
                                    size="small" variant="danger"
                                    x-cloak x-show="extension.nsfw === 1">
                                    18+
                                </sl-tag>
                            </div>
                            <div class="source__version" x-text="simpleLanguageName(extension.lang)"></div>
                        </div>
                        <sl-button class="download-button" 
                            pill 
                            size="small" 
                            download
                            :href="`${$store.repoUrl}/apk/${extension.apk}`"
                            @click="window.goatcounter?.count({ path: `/extensions/apk/${extension.apk}` })">
                            <sl-icon name="download"></sl-icon>
                        </sl-button>
                    </div>
                </template>
            </div>
        </template>
    </div>
</body>

</html>